<template>
  <div class="project-form-box basic-from">
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">土地信息</div>
        <el-form ref="landInfo" class="form-wrap" label-position="top" size="small" :model="propForm.landInfo">
          <el-form-item label="宗地号" prop="parcelNum">
            <span class="in_txt">{{propForm.landInfo.parcelNum}}</span>
          </el-form-item>
          <el-form-item label="宗地面积(m²)" prop="parcelArea">
            <span class="in_txt">{{propForm.landInfo.parcelArea}}</span>
          </el-form-item>
          <el-form-item label="土地用途" prop="landUse">
            <span class="in_txt">{{propForm.landInfo.landUse}}</span>
          </el-form-item>
          <el-form-item label="土地合同编号" prop="landContractNum">
            <span class="in_txt">{{propForm.landInfo.landContractNum}}</span>
          </el-form-item>
          <el-form-item label="地址" prop="cityCode" class="full">
            <span class="in_txt">
              {{getCardTypeValue(propForm.landInfo.cityCode,cityAssembly)}}
              {{getCardTypeValue(propForm.landInfo.countyCode,districtCollection)}}
              <template
                v-if="propForm.landInfo.countyCode == '440304'"
              >{{propForm.landInfo.street | dict('streets')}}</template>
              <template v-else>{{propForm.landInfo.street | dict(propForm.landInfo.countyCode)}}</template>
              {{getCardTypeValue(propForm.landInfo.community,communityNameStreet)}}
              {{propForm.landInfo.addressInfo}}
            </span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">项目信息</div>
        <el-form ref="propertyBasic" label-position="top" class="form-wrap" size="small" :model="propForm.propertyBasic">
          <el-form-item label="项目名称" prop="projectName">
            <span class="in_txt">{{propForm.propertyBasic.projectName}}</span>
          </el-form-item>

					<el-form-item label="曾用名" prop="usedName">
						<span class="in_txt">{{propForm.usedName}}</span>
					</el-form-item>

          <el-form-item label="管理权属" prop="manageUnit">
            <span class="in_txt">{{getCardTypeValue(propForm.propertyBasic.manageUnit,manageUnits)}}</span>
          </el-form-item>

          <el-form-item label="项目编号" prop="projectCode" v-if="isEdit">
            <span class="in_txt">{{propForm.propertyBasic.projectCode}}</span>
          </el-form-item>
          <el-form-item label="项目国家编号">
            <el-col class="in_txt">{{propForm.propertyBasic.projectCountryCode}}</el-col>
          </el-form-item>
          <el-form-item label="项目建筑面积(m²)" prop="projectArea">
            <span class="in_txt">{{propForm.propertyBasic.projectArea}}</span>
          </el-form-item>
          <el-form-item label="开发单位">
            <span class="in_txt">{{propForm.propertyBasic.constructionUnit}}</span>
          </el-form-item>
          <el-form-item label="联系人">
            <span class="in_txt">{{propForm.propertyBasic.contactName}}</span>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactPhone">
            <span class="in_txt">{{propForm.propertyBasic.contactPhone}}</span>
          </el-form-item>
          <el-form-item label="项目来源">
            <span class="in_txt">{{getCardTypeValue(propForm.propertyBasic.isUpdate,isUpdates)}}</span>
          </el-form-item>
          <el-form-item label="总栋数" prop="mapCoordinates">
            <span class="in_txt">{{propForm.totalBuilding}}</span>
          </el-form-item>
          <el-form-item label="数据渠道">
            <span class="in_txt">{{getCardTypeValue(propForm.propertyBasic.channel,propertyChannels)}}</span>
          </el-form-item>
          <el-form-item label="地图坐标" style="position:relative;" v-if="propForm.propertyBasic.mapCoordinates">
            <el-button size="mini" @click="$refs.positionDialog.show('preview')" style="position: absolute;top: -38px;left: 70px;">查看</el-button>
            <span class="in_txt">{{propForm.propertyBasic.mapCoordinates}}</span>
          </el-form-item>
          <el-form-item label="地图围栏" style="position:relative;" v-if="propForm.propertyBasic.fenceCoordinates">
            <el-button size="mini" @click="$refs.positionDialog.show('pen-preview')" style="position: absolute;top: -38px;left: 70px;">查看</el-button>
            <span class="in_txt">{{propForm.propertyBasic.fenceCoordinates}}</span>
          </el-form-item>
          <el-form-item label="vr地址" class="full">
            <span class="in_txt">{{propForm.propertyBasic.vrUrl}}</span>
          </el-form-item>
          <el-form-item label="备注" class="full">
            <span class="in_txt">{{propForm.propertyBasic.remarks}}</span>
          </el-form-item>
        </el-form>
        <!-- 地图坐标选择弹窗 -->
        <positionDialog ref="positionDialog" :position="propForm.propertyBasic.mapCoordinates" :pen="propForm.propertyBasic.fenceCoordinates" />
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">物业信息</div>
        <div class="table-planning">
          <el-table :data="propForm.supportingFacilities" align="left">
            <el-table-column prop="propertyName" label="物业名称" width="120" />
            <el-table-column prop="projectType" label="物业大类" width="120">
              <template slot-scope="scope">
                <span>{{getCardTypeValue(scope.row.projectType,propertyTypes)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="projectSubclassType" label="物业小类" width="120">
              <template slot-scope="scope">
                <span>{{getCardTypeValue(scope.row.projectSubclassType, propertyUseTypes)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="floorSpace" label="占地面积(m²)" width="120" />
            <el-table-column prop="buildArea" label="建筑面积(m²)" width="120" />
            <el-table-column prop="transferMode" label="移交方式" width="120">
              <template slot-scope="scope">
                <span>{{getCardTypeValue(scope.row.transferType,transferModeOption)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" width="120" />
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClickLook(scope)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">资料信息</div>
        <div class="material">
          <el-tabs v-model="milestoneSort">
            <el-tab-pane :name="item.milestoneSort.toString()" :key="item.milestoneSort" v-for="item in propForm.projectMilestones">
              <span slot="label">
                <div class="tabRadius">{{ item.milestoneSort }}</div>
                <div>{{ item.milestoneName }}</div>
              </span>
              <el-table :data="item.materialsFormVoList" class="material-table" align="left" style="width: 100%;" @selection-change="handleSelectionChange">
                <el-table-column prop="sort" label="序号" width="60" />
                <el-table-column prop="materialsName" label="材料名称" width="120">
                  <template slot-scope="scope">
                    <div v-html="scope.row.materialsName"></div>
                  </template>
                </el-table-column>
                <el-table-column prop="fileBusId" label="文件名称" width="160">
                  <template slot-scope="scope">
                    <el-row :gutter="10">
                      <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
                        <div class="grid-content bg-purple-light" style="line-height: 40px" v-if="scope.row.original">
                          <span style="margin-right: 10px;">{{scope.row.original}}</span>
                          <el-button type="text" @click="handleDownload(scope.row)">下载</el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="120" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="cFormFoot">
      <el-button type="primary" plain class="planning-button" @click="closeTab">关闭</el-button>
    </div>
    <supportFacilityInformation ref="supportFacilityInformation"></supportFacilityInformation>
  </div>
</template>

<script src="./construction_look.js">

</script>

<style scoped lang="scss">
.project-form-box {
  .in_txt {
    color: #999999;
  }
  .resource-manage {
    .card-box {
      margin: 24px;
      overflow: hidden;
      .planning-button {
        margin: 10px;
        float: right;
      }
      .material {
        padding: 20px;
        .material-table {
          margin: 20px 0;
          position: relative;
        }
      }
      //里程碑样式-开始
      /deep/ .el-tabs__header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
      /deep/ .el-tabs__item {
        margin: 0 50px;
        .tabRadius {
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border: 1px solid;
          border-radius: 50%;
          background-color: #fff;
        }
      }
      /deep/ .el-tabs__active-bar {
        height: 0;
        background-color: #fff;
      }
      /deep/ .el-tabs__nav-wrap::after {
        left: 50px;
        bottom: 50px;
        width: calc(100% - 120px);
      }
      //里程碑样式-结束
    }
  }
}
</style>
